<template>
  <div data-v-4d60b52c="" class="detail-list">
    <el-button-group
      style="float: right;  color: red; font-size: 25px; margin-right: 10px;"
      title="关闭"
    >
      <i class="el-icon-close" @click="winclose"></i>
    </el-button-group>
    <div data-v-4d60b52c="" class="fullscreen-header  ">
      <div data-v-4d60b52c="" class="title">
        {{ fromInfo.formName }}统计信息
      </div>
    </div>
    <div
      data-v-06acca6c=""
      data-v-4d60b52c=""
      class="empty-data"
      v-if="fromdata === undefined"
    >
      <div data-v-06acca6c="" class="bg-img filter"></div>
      <div data-v-06acca6c="" class="text">没有符合筛选条件的数据</div>
    </div>
    <template
      v-else
      v-for="(item, index) in fromInfo.layoutitemlist[0].widgetForm.list[0]
        .columns[0].list"
    >
      <div
        class="wj-topic"
        :key="item.key"
        v-if="
          item.type === 'radio' ||
            item.type === 'checkbox' ||
            item.type === 'select'
        "
      >
        <div data-v-496f769f="" class="header">
          <div
            data-v-496f769f=""
            :title="'Q' + index + ':' + item.title"
            class="title"
          >
            Q{{ index + 1 }}：{{ item.title }}
            <!-- {{ setchartType(item.options.filed, 'line') }} -->

            <el-button-group style="float:right">
              <el-button
                :class="
                  getchartType(item.options.filed) === 'line'
                    ? 'el-button--primary'
                    : ''
                "
                @click="setchartType(item.options.filed, 'line')"
                ><nx-svg-icon
                  class-name="linechart-icon"
                  icon-class="linechart"
                  style="margin-right: 5px;"
                />折线图</el-button
              >
              <el-button
                :class="
                  getchartType(item.options.filed) === 'bar'
                    ? 'el-button--primary'
                    : ''
                "
                @click="setchartType(item.options.filed, 'bar')"
                ><nx-svg-icon
                  class-name="barchart-icon"
                  icon-class="barchart"
                  style="margin-right: 5px;"
                />柱形图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'bar-y' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'bar-y')"
                ><nx-svg-icon
                  class-name="barychart-icon"
                  icon-class="barychart"
                  style="margin-right: 5px;"
                />条形图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'pie' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'pie')"
                ><nx-svg-icon
                  class-name="piechart-icon"
                  icon-class="piechart"
                  style="margin-right: 5px;"
                />饼图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'ring' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'ring')"
                ><nx-svg-icon
                  class-name="ringchart-icon"
                  icon-class="ringchart"
                  style="margin-right: 5px;"
                />环形图</el-button
              >
            </el-button-group>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <barechart
              :fromdata="fromdata"
              :controldata="item"
              :charttype="getchartType(item.options.filed)"
            ></barechart>
          </el-col>
          <el-col :span="12">
            <el-row style="background-color: #f2f2f2;" class="headtable"
              ><el-col :span="12"> 选项</el-col
              ><el-col :span="12">统计情况</el-col></el-row
            >
            <el-row
              v-for="(optionsitem, optionIndex) in item.options.options"
              :key="optionIndex"
              ><el-col :span="12">{{ optionsitem.label }}</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + optionsitem.label] }}
              </el-col></el-row
            >
          </el-col>
        </el-row>
      </div>
      <div
        class="wj-topic"
        :key="item.key"
        v-if="
          item.type === 'slider' ||
            item.type === 'rate' ||
            item.type === 'inputnumber'
        "
      >
        <div data-v-496f769f="" class="header">
          <div
            data-v-496f769f=""
            :title="'Q' + index + ':' + item.title"
            class="title"
          >
            Q{{ index + 1 }}：{{ item.title }}
            <!-- {{ setchartType(item.options.filed, 'line') }} -->

            <el-button-group style="float:right">
              <el-button
                :class="
                  getchartType(item.options.filed) === 'line'
                    ? 'el-button--primary'
                    : ''
                "
                @click="setchartType(item.options.filed, 'line')"
                ><nx-svg-icon
                  class-name="linechart-icon"
                  icon-class="linechart"
                  style="margin-right: 5px;"
                />折线图</el-button
              >
              <el-button
                :class="
                  getchartType(item.options.filed) === 'bar'
                    ? 'el-button--primary'
                    : ''
                "
                @click="setchartType(item.options.filed, 'bar')"
                ><nx-svg-icon
                  class-name="barchart-icon"
                  icon-class="barchart"
                  style="margin-right: 5px;"
                />柱形图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'bar-y' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'bar-y')"
                ><nx-svg-icon
                  class-name="barychart-icon"
                  icon-class="barychart"
                  style="margin-right: 5px;"
                />条形图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'pie' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'pie')"
                ><nx-svg-icon
                  class-name="piechart-icon"
                  icon-class="piechart"
                  style="margin-right: 5px;"
                />饼图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'ring' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'ring')"
                ><nx-svg-icon
                  class-name="ringchart-icon"
                  icon-class="ringchart"
                  style="margin-right: 5px;"
                />环形图</el-button
              >
            </el-button-group>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <barechart
              :fromdata="fromdata"
              :controldata="item"
              :charttype="getchartType(item.options.filed)"
            ></barechart>
          </el-col>
          <el-col :span="12">
            <el-row style="background-color: #f2f2f2;" class="headtable"
              ><el-col :span="12"> 选项</el-col
              ><el-col :span="12">统计情况</el-col></el-row
            >
            <el-row
              ><el-col :span="12">总和：</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + 'sum'] }}
              </el-col></el-row
            >
            <el-row
              ><el-col :span="12">平均值：</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + 'svg'] }}
              </el-col></el-row
            >
            <el-row
              ><el-col :span="12">最小值：</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + 'min'] }}
              </el-col></el-row
            >
            <el-row
              ><el-col :span="12">最大值：</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + 'max'] }}
              </el-col></el-row
            >
          </el-col>
        </el-row>
      </div>
      <div class="wj-topic" :key="item.key" v-if="item.type === 'switch'">
        <div data-v-496f769f="" class="header">
          <div
            data-v-496f769f=""
            :title="'Q' + index + ':' + item.title"
            class="title"
          >
            Q{{ index + 1 }}：{{ item.title }}
            <!-- {{ setchartType(item.options.filed, 'line') }} -->

            <el-button-group style="float:right">
              <el-button
                :class="
                  getchartType(item.options.filed) === 'line'
                    ? 'el-button--primary'
                    : ''
                "
                @click="setchartType(item.options.filed, 'line')"
                ><nx-svg-icon
                  class-name="linechart-icon"
                  icon-class="linechart"
                  style="margin-right: 5px;"
                />折线图</el-button
              >
              <el-button
                :class="
                  getchartType(item.options.filed) === 'bar'
                    ? 'el-button--primary'
                    : ''
                "
                @click="setchartType(item.options.filed, 'bar')"
                ><nx-svg-icon
                  class-name="barchart-icon"
                  icon-class="barchart"
                  style="margin-right: 5px;"
                />柱形图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'bar-y' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'bar-y')"
                ><nx-svg-icon
                  class-name="barychart-icon"
                  icon-class="barychart"
                  style="margin-right: 5px;"
                />条形图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'pie' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'pie')"
                ><nx-svg-icon
                  class-name="piechart-icon"
                  icon-class="piechart"
                  style="margin-right: 5px;"
                />饼图</el-button
              >
              <el-button
                :type="
                  getchartType(item.options.filed) === 'ring' ? 'primary' : ''
                "
                @click="setchartType(item.options.filed, 'ring')"
                ><nx-svg-icon
                  class-name="ringchart-icon"
                  icon-class="ringchart"
                  style="margin-right: 5px;"
                />环形图</el-button
              >
            </el-button-group>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <barechart
              :fromdata="fromdata"
              :controldata="item"
              :charttype="getchartType(item.options.filed)"
            ></barechart>
          </el-col>
          <el-col :span="12">
            <el-row style="background-color: #f2f2f2;" class="headtable"
              ><el-col :span="12"> 选项</el-col
              ><el-col :span="12">统计情况</el-col></el-row
            >
            <el-row
              ><el-col :span="12">是：</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + 'yes'] }}
              </el-col></el-row
            >
            <el-row
              ><el-col :span="12">否：</el-col
              ><el-col :span="12"
                >{{ fromdata[item.options.filed + 'no'] }}
              </el-col></el-row
            >
          </el-col>
        </el-row>
      </div>
      <template v-if="item.type === 'listview'">
        <el-collapse
          :key="item.key"
          v-model="item.key"
          style="margin-left: 30px;"
        >
          <el-collapse-item
            :title="'Q' + (index + 1) + '：' + item.title"
            :name="item.key"
          >
            <template v-for="(element, index) in item.options.columns">
              <div
                class="wj-topic"
                :key="element.key"
                v-if="
                  item.type === 'radio' ||
                    item.type === 'checkbox' ||
                    item.type === 'select'
                "
              >
                <div data-v-496f769f="" class="header">
                  <div
                    data-v-496f769f=""
                    :title="'i' + index + ':' + element.title"
                    class="title"
                  >
                    Q{{ index + 1 }}：{{ element.title }}
                    <!-- {{ setchartType(item.options.filed, 'line') }} -->

                    <el-button-group style="float:right">
                      <el-button
                        :class="
                          getchartType(element.dataIndex) === 'line'
                            ? 'el-button--primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'line')"
                        ><nx-svg-icon
                          class-name="linechart-icon"
                          icon-class="linechart"
                          style="margin-right: 5px;"
                        />折线图</el-button
                      >
                      <el-button
                        :class="
                          getchartType(element.dataIndex) === 'bar'
                            ? 'el-button--primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'bar')"
                        ><nx-svg-icon
                          class-name="barchart-icon"
                          icon-class="barchart"
                          style="margin-right: 5px;"
                        />柱形图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'bar-y'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'bar-y')"
                        ><nx-svg-icon
                          class-name="barychart-icon"
                          icon-class="barychart"
                          style="margin-right: 5px;"
                        />条形图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'pie'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'pie')"
                        ><nx-svg-icon
                          class-name="piechart-icon"
                          icon-class="piechart"
                          style="margin-right: 5px;"
                        />饼图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'ring'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'ring')"
                        ><nx-svg-icon
                          class-name="ringchart-icon"
                          icon-class="ringchart"
                          style="margin-right: 5px;"
                        />环形图</el-button
                      >
                    </el-button-group>
                  </div>
                </div>
                <el-row>
                  <el-col :span="12">
                    <barechart
                      :fromdata="fromdata[element.parentControlId]"
                      :controldata="element"
                      :charttype="getchartType(element.dataIndex)"
                      :isdetail="true"
                    ></barechart>
                  </el-col>
                  <el-col :span="12">
                    <el-row style="background-color: #f2f2f2;" class="headtable"
                      ><el-col :span="12"> 选项</el-col
                      ><el-col :span="12">统计情况</el-col></el-row
                    >
                    <el-row
                      v-for="(optionsitem, optionIndex) in element.options
                        .options"
                      :key="optionIndex"
                      ><el-col :span="12">{{ optionsitem.label }}</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + optionsitem.label
                          ]
                        }}
                      </el-col></el-row
                    >
                  </el-col>
                </el-row>
              </div>
              <div
                class="wj-topic"
                :key="element.key"
                v-if="
                  element.type === 'slider' ||
                    element.type === 'rate' ||
                    element.type === 'inputnumber'
                "
              >
                <div data-v-496f769f="" class="header">
                  <div
                    data-v-496f769f=""
                    :title="'Q' + index + ':' + element.title"
                    class="title"
                  >
                    Q{{ index + 1 }}：{{ element.title }}
                    <!-- {{ setchartType(item.options.filed, 'line') }} -->

                    <el-button-group style="float:right">
                      <el-button
                        :class="
                          getchartType(element.dataIndex) === 'line'
                            ? 'el-button--primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'line')"
                        ><nx-svg-icon
                          class-name="linechart-icon"
                          icon-class="linechart"
                          style="margin-right: 5px;"
                        />折线图</el-button
                      >
                      <el-button
                        :class="
                          getchartType(element.dataIndex) === 'bar'
                            ? 'el-button--primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'bar')"
                        ><nx-svg-icon
                          class-name="barchart-icon"
                          icon-class="barchart"
                          style="margin-right: 5px;"
                        />柱形图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'bar-y'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'bar-y')"
                        ><nx-svg-icon
                          class-name="barychart-icon"
                          icon-class="barychart"
                          style="margin-right: 5px;"
                        />条形图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'pie'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'pie')"
                        ><nx-svg-icon
                          class-name="piechart-icon"
                          icon-class="piechart"
                          style="margin-right: 5px;"
                        />饼图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'ring'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'ring')"
                        ><nx-svg-icon
                          class-name="ringchart-icon"
                          icon-class="ringchart"
                          style="margin-right: 5px;"
                        />环形图</el-button
                      >
                    </el-button-group>
                  </div>
                </div>
                <el-row>
                  <el-col :span="12">
                    <barechart
                      :fromdata="fromdata[element.parentControlId]"
                      :controldata="element"
                      :charttype="getchartType(element.dataIndex)"
                      :isdetail="true"
                    ></barechart>
                  </el-col>
                  <el-col :span="12">
                    <el-row style="background-color: #f2f2f2;" class="headtable"
                      ><el-col :span="12"> 选项</el-col
                      ><el-col :span="12">统计情况</el-col></el-row
                    >
                    <el-row
                      ><el-col :span="12">总和：</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + 'sum'
                          ]
                        }}
                      </el-col></el-row
                    >
                    <el-row
                      ><el-col :span="12">平均值：</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + 'svg'
                          ]
                        }}
                      </el-col></el-row
                    >
                    <el-row
                      ><el-col :span="12">最小值：</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + 'min'
                          ]
                        }}
                      </el-col></el-row
                    >
                    <el-row
                      ><el-col :span="12">最大值：</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + 'max'
                          ]
                        }}
                      </el-col></el-row
                    >
                  </el-col>
                </el-row>
              </div>
              <div
                class="wj-topic"
                :key="element.key"
                v-if="element.type === 'switch'"
              >
                <div data-v-496f769f="" class="header">
                  <div
                    data-v-496f769f=""
                    :title="'Q' + index + ':' + element.title"
                    class="title"
                  >
                    Q{{ index + 1 }}：{{ element.title }}
                    <!-- {{ setchartType(item.options.filed, 'line') }} -->

                    <el-button-group style="float:right">
                      <el-button
                        :class="
                          getchartType(element.dataIndex) === 'line'
                            ? 'el-button--primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'line')"
                        ><nx-svg-icon
                          class-name="linechart-icon"
                          icon-class="linechart"
                          style="margin-right: 5px;"
                        />折线图</el-button
                      >
                      <el-button
                        :class="
                          getchartType(element.dataIndex) === 'bar'
                            ? 'el-button--primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'bar')"
                        ><nx-svg-icon
                          class-name="barchart-icon"
                          icon-class="barchart"
                          style="margin-right: 5px;"
                        />柱形图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'bar-y'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'bar-y')"
                        ><nx-svg-icon
                          class-name="barychart-icon"
                          icon-class="barychart"
                          style="margin-right: 5px;"
                        />条形图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'pie'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'pie')"
                        ><nx-svg-icon
                          class-name="piechart-icon"
                          icon-class="piechart"
                          style="margin-right: 5px;"
                        />饼图</el-button
                      >
                      <el-button
                        :type="
                          getchartType(element.dataIndex) === 'ring'
                            ? 'primary'
                            : ''
                        "
                        @click="setchartType(element.dataIndex, 'ring')"
                        ><nx-svg-icon
                          class-name="ringchart-icon"
                          icon-class="ringchart"
                          style="margin-right: 5px;"
                        />环形图</el-button
                      >
                    </el-button-group>
                  </div>
                </div>
                <el-row>
                  <el-col :span="12">
                    <barechart
                      :fromdata="fromdata[element.parentControlId]"
                      :controldata="element"
                      :charttype="getchartType(element.dataIndex)"
                      :isdetail="true"
                    ></barechart>
                  </el-col>
                  <el-col :span="12">
                    <el-row style="background-color: #f2f2f2;" class="headtable"
                      ><el-col :span="12"> 选项</el-col
                      ><el-col :span="12">统计情况</el-col></el-row
                    >
                    <el-row
                      ><el-col :span="12">是：</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + 'yes'
                          ]
                        }}
                      </el-col></el-row
                    >
                    <el-row
                      ><el-col :span="12">否：</el-col
                      ><el-col :span="12"
                        >{{
                          fromdata[element.parentControlId][
                            element.dataIndex + 'no'
                          ]
                        }}
                      </el-col></el-row
                    >
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-collapse-item>
        </el-collapse>
      </template>
    </template>
  </div>
</template>
<script>
import barechart from '@/components/echartreport/barechart.vue'
import { getFromInfo } from '@/api/tappfrom.js'
import { apiComm } from '@/api/index'
export default {
  components: { barechart },
  data() {
    return {
      fromid: '',
      apicode: '',
      fromdata: undefined,
      fromInfo: { formName: '' },
      chartType: {}
    }
  },
  methods: {
    loadChartData() {
      this.fromid = this.$route.query.fromid
      if (this.fromid === undefined || this.fromid === null) {
        this.$message.error('表单ID找不到！')
        return false
      }
      getFromInfo(this.fromid).then(res => {
        this.fromInfo = JSON.parse(res.data.fromdesignjson)
        this.apicode = res.data.fromTableName + '_queryChartList'

        apiComm(this.apicode, {}).then(r => {
          if (r.data.length > 0) {
            this.fromdata = this.fromdata === undefined ? {} : this.fromdata
            this.fromdata = Object.assign(this.fromdata, r.data[0])
            this.loadchartType()
            this.$forceUpdate()
          } else {
            this.fromdata = undefined
          }
        })
      })
    },
    getvalue(filed, label) {
      return this.fromdata[filed + label]
    },
    loadchartType() {
      this.fromInfo.layoutitemlist[0].widgetForm.list[0].columns[0].list.forEach(
        ee => {
          if (
            ee.type === 'radio' ||
            ee.type === 'checkbox' ||
            ee.type === 'select' ||
            ee.type === 'switch'
          ) {
            this.chartType[ee.options.filed] = 'line'
          }
          if (
            ee.type === 'slider' ||
            ee.type === 'rate' ||
            ee.type === 'inputnumber'
          ) {
            this.chartType[ee.options.filed] = 'bar'
          }
          if (ee.type === 'listview') {
            this.chartType[ee.options.controlId] = {}
            this.fromdata = this.fromdata === undefined ? {} : this.fromdata
            this.fromdata[ee.options.controlId] = {}
            apiComm(ee.options.controlId + '_queryChartList', {}).then(r => {
              if (r.data.length > 0) {
                this.fromdata[ee.options.controlId] = r.data[0]
                this.$forceUpdate()
              }
            })
            ee.options.columns.forEach(cel => {
              if (
                ee.type === 'radio' ||
                ee.type === 'checkbox' ||
                ee.type === 'select' ||
                ee.type === 'switch'
              ) {
                this.chartType[ee.options.controlId][cel.dataIndex] = 'line'
              }
              if (
                ee.type === 'slider' ||
                ee.type === 'rate' ||
                ee.type === 'inputnumber'
              ) {
                this.chartType[ee.options.controlId][cel.dataIndex] = 'bar'
              }
            })
          }
        }
      )
    },
    setchartType(filed, charttype) {
      this.chartType[filed] = charttype
      this.$forceUpdate()
    },
    getchartType(filed) {
      return this.chartType[filed]
    },
    winclose() {
      this.$emit('close')
    }
  },
  computed: {},
  mounted() {
    this.loadChartData()
  }
}
</script>

<style scoped>
.fullscreen-header {
  padding: 30px 24px;
  display: flex;
  box-sizing: border-box;
}
.fullscreen-header .title {
  flex-grow: 1;
  font-size: 16px;
  color: #484848;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.empty-data {
  padding: 65px 0 20px;
  text-align: center;
}
.empty-data .text {
  margin-bottom: 45px;
  font-size: 16px;
}
.wj-topic {
  margin-top: 18px;
  border-radius: 2px 2px 0 0;
  border-bottom: 1px solid #eaeaea;
  background: #fff;
}
.wj-topic .header {
  position: relative;
  height: 42px;
  line-height: 42px;
  width: 100%;
  padding: 0 24px;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 2px 2px 0 0;
}
.wj-topic .header .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  font-size: 14px;
}
.wj-topic .topic-option {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 6px 24px 0 0;
  background: #fff;
}
.headtable {
  background-color: rgb(242, 242, 242);
  font-size: 14px;
  font-weight: bold;
}
.headtable .el-col-12 {
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  padding: 8px;
}
.wj-topic .el-col-12 {
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  padding: 8px;
  font-size: 12px;
  font-weight: normal;
}
</style>
